<template>
	<view>
		<u-sticky bg-color="#fff">
			<view style="width: 100%;">
				<u-navbar :title="pageTitle" :placeholder="true" :fixed="true" bg-color="#fff"
					title-style="font-size: 18px;font-weight: bolder;">
					<view slot="left"></view>
				</u-navbar>
			</view>
		</u-sticky>

		<template v-if="loadingSuccess">

			<view class="swiper-nav">
				<u-swiper height="300rpx" keyName="images" indicator indicator-mode="dot" interval="3000" radius=16rpx
					:indicator="swiperList.length > 1"
					:list="swiperList" @click="swiperClick" />
			</view>

			<!-- 本周精选 -->
			<template v-if="!isAudit">
				<view class="pt-48">
					<VideoList title="本周精选" :video-list="weekVideoList" />
				</view>
			</template>


			<!-- 猜你喜欢 -->
			<!-- <template v-if="!isAudit">
			<LikeVideo :video-list="videoList" />
		</template> -->

			<!-- 猜你爱看 -->
			<template v-if="!isAudit && videoList.length > 0">
				<view class="pt-8">
					<VideoList title="猜你爱看" :video-list="videoList" />
				</view>
			</template>

			<!-- 历史观看弹出层 -->
			<template v-if="!isAudit">
				<IndexHistoryModal :videoData="lastHistoryData" />
			</template>

			<!-- 审核模式下的列表 -->
			<template v-if="isAudit">
				<ShenheStateIndexBeautiful />
			</template>

		</template>

	</view>
</template>

<script>
import colorMixins from '@/mixins/colorMixins.js'
import VideoList from '@/components/video-list/video-list.vue'
import LikeVideo from '@/components/like-video/like-video.vue'
import IndexHistoryModal from '@/components/index-history-modal/index-history-modal.vue'
import ShenheStateIndexBeautiful from '@/components/shenhe-state-index-beautiful/shenhe-state-index-beautiful.vue'
import {
  queryBannerList,
  queryAbility,
  queryGuessList,
  queryHistoryList,
  queryFeaturedList,
  apiBannerClick
} from '@/api/index.js'
import storage from '@/utils/storage.js'
import { ACCESS_TOKEN } from '@/store/mutation-types.js'

export default {
  mixins: [colorMixins],
  components: {
    VideoList,
    LikeVideo,
    IndexHistoryModal,
    ShenheStateIndexBeautiful
  },
  data() {
    return {
      loadingSuccess: false,
      swiperList: [],
      weekVideoList: [],
      videoList: [],
      lastHistoryData: {}
    }
  },
  computed: {
    pageTitle() {
      return this.$store.state.appConfig.name || '首页'
    },
    // true审核模式
    isAudit() {
      return this.$store.state.appConfig.is_ad == 1
    }
  },
  async onLoad(options) {
    // this.$modal.loading('数据加载中...')
    const { path } = options

    await this.getLoginCode()
    await this.init()
    this.loadingSuccess = true
  },
  onShow() {
    const token = storage.get(ACCESS_TOKEN)
    if (token) {
      this.queryHistoryListFn()
    }
  },
  methods: {
    // 登录
    getLoginCode() {
      return new Promise(resolve => {
        // #ifdef MP-WEIXIN
        uni.login({
          provider: 'weixin',
          success: res => {
            const { code } = res
            // 在store/user.js执行登录请求
            this.$store.dispatch('Login', code).then(res => {
              // 获取小程序配置
              this.$store.dispatch('SetAppConfig')
              resolve(res)
            })
          }
        })
        // #endif

        // #ifdef APP-PLUS
        this.$store.dispatch('Login').then(res => {
          resolve(res)
        })
        // #endif
      })
    },

    async init() {
      this.queryBannerListFn()
      this.queryWeekVideoList()
      this.queryGuessListFn()
      this.queryHistoryListFn()
    },

    // 查轮播图
    async queryBannerListFn() {
      const { list } = await queryBannerList()
      const arr = list.map(e => {
        return {
          ...e,
          images: e.oss_object.url
        }
      })
      this.swiperList = arr
    },


    // 本周精选分类数据
    async queryWeekVideoList() {
      const { list } = await queryFeaturedList()
      this.weekVideoList = list
    },

    // 猜你爱看数据
    async queryGuessListFn() {
      const { list } = await queryGuessList()
      this.videoList = list
    },

    // 查最后一次观看记录
    async queryHistoryListFn() {
      const { data } = await queryHistoryList({ pageNum: 1 })
      this.lastHistoryData = data[0]
    },

    // 根据不同标识，跳转对应页面
    // async switchPage(path) {
    //   if (path == 'player') {
    //     // const tv_info = await db.collection('a_tv').doc(options.tv_id).get()
    //     // // 参数带来的series需要传过去
    //     // tv_info.result.data[0].series = options.series
    //     // this.toVideoDetail(tv_info.result.data[0])
    //   } else if (path == 'record') {
    //     // 自动加载用户的最后一条历史浏览记录，并进入播放
    //     // const last_view = await db.collection('a_history').where({ user_id: vk.vuex.get('$user.userInfo._id') }).orderBy('_add_time', 'desc').limit(1).get()
    //     // this.toVideoDetail(last_view.data[0])
    //   } else if (path == 'signin') {
    //     uni.navigateTo({ url: '/pages/signin/signin' })
    //   }
    // },

    // 轮播图点击
    swiperClick(index) {
      const item = this.swiperList[index]
      const {
        id,
        url,
        library_id,
        episode_id
      } = item

      if (this.isAudit) return false

      apiBannerClick({ bid: id }).then(() => {
        if (url) {
          uni.navigateTo({ url: url })
        } else if (library_id) {
          uni.navigateTo({ url: `/pages/player/player?library_id=${library_id}&episode_id=${episode_id}` })
        }
      })

    },
  }
}
</script>

<style lang="scss" scoped>
	.swiper-nav {
		margin: 8rpx 30rpx 0 30rpx;
	}
</style>
